<template>
  <div class="shopping">
    <!--
      购物车业务逻辑：
      1、在商品详情点击添加购物车，系统会弹出alert“添加成功的提示”,点击确定后，会进入购物车页面
      2、跳转到购物车页面，会展示添加的商品，此刻在默认状态下商品是未选中状态
      3、在购物车中通过加号或者减少该商品的购买数量，当商品数量为1的时候就不能减少了
      4、当添加的商品存在购物车中，只需要给商品数量加1即可
      5、商品中会展示自己已选商品的总价格和已选商品的总数量，当选中商品或选中商品的数量发生变化的时候，总价格和总数量也会发生对于的变化
    -->
    <!--
      从商品详情进入购物车页面
      1、首先进入到Main.vue
      2、通过Main.vue跳转到购物车（通过传递标记的方式index）
      问题: 
        当我们从商品详情进入到购物车过后，然后在点击商品列表进入到详情，此刻的详情页面还是我们之前第一次的详情页面
        因为keep-alive缓存了此时的页面
      解决方案：
        通过在跳转到Main之后通过自定义指令初始化虚拟任务栈
     -->
    <nav-bar pageName="购物车"
             :isBack='false'>
    </nav-bar>
    <div class="shopping-content">
      <div class="shopping-content-list">
        <div class="shopping-content-list-item"
             v-for="(item,index) in shoppingDatas"
             :key="index"
             @click="onSelectClick(item)">
          <img src="@img/check.svg"
               class="shopping-content-list-item-check"
               v-if="item.isCheck">
          <img src="@img/no-check.svg"
               class="shopping-content-list-item-check"
               v-else>
          <img :src="item.img"
               class="shopping-content-list-item-img">
          <div class="shopping-content-list-item-desc">
            <p class="shopping-content-list-item-desc-name text-line-2">
              <direct v-if="item.isDirect"></direct>
              {{item.name}}
            </p>
            <div class="shopping-content-list-item-desc-data">
              <p class="shopping-content-list-item-desc-data-price">¥{{item.price | priceFilter}}</p>
              <!-- 加减按钮组件 -->
              <number-manger :defaultNumber='item.number'
                             @onChangeNumber='onChangeNumber(arguments,index,item)'></number-manger>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计 -->
      <div class="shopping-content-total">
        <!-- 全选 -->
        <div class="shopping-content-total-check"
             @click="onAllCheckClick">
          <img src="@img/check.svg"
               v-if="totalData.isAll">
          <img src="@img/no-check.svg"
               v-else>
          <p>全选</p>
        </div>
        <!-- 总价格 -->
        <div class="shopping-content-total-price">
          <p class="shopping-content-total-price-total">合计: <span>{{totalData.goodsNumber}}件</span></p>
          <p class="shopping-content-total-price-all">总额:
            <span>¥{{totalData.totalPrice | priceFilter}}</span>
            &nbsp;
            &nbsp;
          </p>
        </div>
        <!-- 接算-->
        <div class="shopping-content-total-commit">
          去结算({{totalData.goodsNumber}})
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@c/currency/NavigationBar.vue'
import Direct from '@c/goods/Direct.vue'
import NumberManger from '@c/goods/NumberManger.vue'
export default {
  components: {
    NavBar,
    Direct,
    NumberManger
  },
  data () {
    return {
      shoppingDatas: this.$store.state.shoppCarDatas,
      totalData: {
        // 是否全选
        isAll: false,
        totalPrice: 0,
        goodsNumber: 0
      }
    }
  },
  methods: {
    onChangeNumber (args, index, item) {
      let number = args[0]
      let obj = {
        index,
        number
      }
      this.$store.commit('changeShoppingDataNumber', obj)
      // 当商品数量发生改变的时候并且选中了该商品才调用该方法
      if (item.isCheck) {
        this.computeGoodsTotal()
      }
    },
    // 商品chec按钮点击事件
    onSelectClick (item) {
      item.isCheck = !item.isCheck
      this.computeGoodsTotal()
    },
    // 全选点击事件
    onAllCheckClick () {
      this.totalData.isAll = !this.totalData.isAll
      this.shoppingDatas.forEach(item => item.isCheck = this.totalData.isAll)
      this.computeGoodsTotal()
    },
    /**
     * 计算总计数据
    */
    computeGoodsTotal () {
      // 每一次计算之前先初始化totalData数据
      this.totalData = {
        // 是否全选
        isAll: true,
        totalPrice: 0,
        goodsNumber: 0
      }
      this.shoppingDatas.forEach(item => {
        if (!item.isCheck) {
          this.totalData.isAll = false
        }
        if (item.isCheck) {
          this.totalData.totalPrice += parseFloat(item.price) * parseInt(item.number)
          this.totalData.goodsNumber += parseInt(item.number)
        }
      })
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.shopping {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  &-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: $bgColor;
    border-top: px2rem(1) solid $lineColor;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    &-list {
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      &-item {
        background: white;
        padding: px2rem($marginSize);
        display: flex;
        border-bottom: px2rem(1) solid $lineColor;
        &-check {
          width: px2rem(18);
          height: px2rem(18);
          align-self: center;
          padding: px2rem(6);
        }
        &-img {
          width: px2rem(100);
          height: px2rem(100);
        }
        &-desc {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0 px2rem($marginSize);
          &-name {
            font-size: px2rem($infoSize);
            line-height: px2rem(18);
          }
          &-data {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: px2rem($marginSize);
            &-price {
              font-size: px2rem($titleSize);
              color: $MainColor;
              font-weight: 500;
            }
          }
        }
      }
    }
    &-total {
      height: px2rem(56);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background: white;
      border-top: px2rem(1) solid $lineColor;
      &-check {
        display: flex;
        align-items: center;
        margin: 0 px2rem($marginSize);
        img {
          width: px2rem(18);
          height: px2rem(18);
          padding: px2rem(6);
        }
        p {
          font-size: px2rem($infoSize);
        }
      }
      &-price {
        flex-grow: 2;
        display: flex;
        flex-direction: column;
        &-total {
          font-size: px2rem($titleSize);
          margin-bottom: px2rem(6);
          span {
            font-weight: 500;
          }
        }
        &-all {
          font-size: px2rem($minSize);
          span {
            font-weight: 500;
          }
        }
      }
      &-commit {
        width: px2rem(120);
        height: 100%;
        font-size: px2rem($titleSize);
        background: $MainColor;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>